<template>
  <view class='home'>
    <!-- 
     navigateTo:用于跳转非tabbar页面
     switchTab:用于跳转tabbar页面
     redirectTo:用于关闭当前页面，跳转非tabbar页面
     reLaunch:关闭所有页面，打开新页面
     navigateBack:回退页面   delta:1/2...     
     -->
    <view class="top">
      <my-search bgc="#ffd4e9" :borderRadius="20" @click="toSearch"></my-search>
    </view>
    <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="(item,index) in swiperList" :key='index'>
        <view class="swiper-item" @click="goDetail(item.navigator_url)">
          <image :src="item.image_src" mode=""></image>
        </view>
      </swiper-item>
    </swiper>
    <!-- 分类列表 -->
    <view class="cate">
      <view class="item" v-for="(item,index) in cateList" :key="index" @click="goCate(index)">
        <image :src="item.image_src" mode="widthFix"></image>
      </view>
    </view>
    <!-- 楼层渲染 -->
    <view class="floor">
      <view class="floor-item" v-for="(item,index) in floorList" :key="index">
        <view class="title">
          <image class="title-img" :src="item.floor_title.image_src" mode="widthFix"></image>
        </view>
        <!-- 下面图片 -->
        <view class="img-content">
          <view class="left">
            <image class='ml' :style="{width:`${item.product_list[0].image_width}rpx`}"
              :src="item.product_list[0].image_src" mode="widthFix"></image>
          </view>
          <!-- 
           路由跳转
           navigateTo：跳转到非tabbar
           switchTab:跳转到tabbar页面
           redirectTo:关闭了当前页面跳转到非tabbar页面
           reLanch:关闭了所有页面，跳转至任何页面
           navigateBack({delta:1/2...})后退           
           -->
          <view class="right">
            <template v-for="(i,v) in item.product_list">
              <image @tap="toList(i.name)" class='ml' :key='v' v-if="v!==0" :style="{width:`${i.image_width}rpx`}"
                :src="i.image_src" mode="widthFix">
              </image>
            </template>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import myMixin from '@/mixins/myMixin.js'
  export default {
    mixins: [myMixin],
    data() {
      return {
        swiperList: [],
        cateList: [],
        floorList: []
      };
    },
    /*
     onLoad
     onShow
     onReady
     onHide
     onUnload    
    */
    onLoad() {
      this.getHomeSwiperdata()
      this.getHomeCatitems()
      this.getFloorData()
    },
    methods: {
      async getHomeSwiperdata() {
        const {
          message
        } = await uni.$http.get('/home/swiperdata')
        this.swiperList = message
        console.log('轮播图数据', message);
      },
      // 分类数据
      async getHomeCatitems() {
        const {
          message
        } = await uni.$http.get('/home/catitems')
        this.cateList = message
        console.log('分类数据', message);
      },
      // 详情跳转
      goDetail(path) {
        uni.navigateTo({
          url: path
        })
      },
      // 分类跳转
      goCate(index) {
        if (index === 0) {
          uni.switchTab({
            url: "/pages/cate/cate"
          })
        }
      },
      //楼层数据
      async getFloorData() {
        const {
          message
        } = await uni.$http.get('/home/floordata')
        this.floorList = message
        console.log('楼层数据', message);
      },
      toList(name) {
        uni.navigateTo({
          url: '/pages/list/list?key=' + name
        })
      },
      // 跳转到搜索页
      toSearch() {
        // console.log('toSearch');
        uni.navigateTo({
          url: '/pages/search/search'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .home {
    .swiper {
      height: 360rpx;

      .swiper-item {
        image {
          width: 100%;
          height: 360rpx;
        }
      }
    }

    .cate {
      display: flex;
      justify-content: space-evenly;
      margin: 10rpx 0;

      .item {
        flex: 1;
        text-align: center;

        image {
          width: 80%;
        }
      }
    }
  }

  .floor {
    .title-img {
      margin: 10rpx 0;
    }

    .floor-item {
      .img-content {
        display: flex;
        justify-content: space-between;
      }
    }

    .ml {
      margin-left: 10rpx;
    }
  }

  .top {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
  }
</style>